<template>
	<div class="documents">
		<div v-if="isshowpdf" >
			<pdf v-for="i in pageCount" :key="i" :page="i" :src="url" @loaded="loadPdfHandler"></pdf>
		</div>
		<object v-else :data="url" type="application/pdf" width="100%" height="100%">
			<iframe :src="url" width="100%" height="100%" style="border: none;">
				This browser does not support PDFs. Please download the PDF to view it: <a :href="url">Download PDF</a>
			</iframe>
		</object>
	</div>
</template>

<script>
	import pdf from "vue-pdf"
	export default {
		props: ["url"],
		data() {
			return {
				pageCount: 0,
				currentPage: 0,
				isshowpdf: true,
				urls:""
			};
		},
		components: {
			pdf
		},
		created() {
			setTimeout(() => {
				this.whith()
			}, 500)
		},
		methods: {
			whith() {
				var u = navigator.userAgent;
				var isPc = /macintosh|window/.test(navigator.userAgent.toLowerCase())
				var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
				var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
				if (isAndroid) {
					this.inits()
					this.isshowpdf = true
				} else if (isiOS) {
					this.inits()
					this.isshowpdf = true
				} else if (isPc) {
					this.isshowpdf = false
				}
			},
			inits() {
				this.urls=this.url
				this.urls = pdf.createLoadingTask(this.urls);
				this.urls.then(pdf => {
					this.pageCount = pdf.numPages;
				});
			},
			loadPdfHandler(e) {
				this.currentPage = 1; // 加载的时候先加载第一页
			},
		},
	};
</script>

<style lang="less" rel=stylesheet/less scoped="scoped">
	.documents {
		overflow: auto;
		height: 100%;
		-webkit-overflow-scrolling: touch;
		/*解决ios滚动不流畅*/
	}
</style>
